<!--
 * @Description: 商城详情
 * @Author: wrysunny
 * @Date: 2024-11-25 16:09:26
 * @LastEditor: wrysunny
 * @LastEditTime: 2024-12-11 10:30:43
-->
<template>
	<view class="min-h-[100vh] bg-background">
		<view>
			<up-swiper
				@click="utils.previewImage($setBaseUrl(goods.appGood?.gallery))"
				:list="$setBaseUrl(goods.appGood?.gallery || [])"
				height="100vw"
				indicatorActiveColor="#8C4F3D"
				indicatorInactiveColor="#C39A71"
				indicator
			></up-swiper>
		</view>
		<view class="p-[20rpx]">
			<view class="bg-white rounded-[16rpx] p-[20rpx] relative">
				<view class="">
					<text class="text-[40rpx] text-[#FF0000] font-bold">￥{{ goods.appGood?.price }}</text>
					<text class="text-[26rpx] text-gray line-through ml-[10rpx]">￥{{ goods.appGood?.demoPrice }}</text>
				</view>
				<view class="flex justify-between items-center">
					<text class="font-bold text-[30rpx] tracking-[1px]">{{ goods.appGood?.name }}</text>
					<text class="text-gray text-[24rpx]">售出 {{ goods.appGood?.sale }}</text>
				</view>
				<view class="line-clamp-2 tracking-[1px] text-[24rpx] text-gray">{{ goods.appGood?.brief }}</view>
				<view class="bg-[#F7F8FA] mt-[20rpx] rounded-[12rpx] grid grid-cols-4">
					<view class="px-[24rpx] py-[16rpx]" v-for="item in goods.appGood?.tagKeyValue" :key="$u.guid()">
						<view class="text-[26rpx]">{{ item.value }}</view>
						<view class="text-[22rpx] text-gray">{{ item.key }}</view>
					</view>
				</view>
				<button class="absolute top-[20rpx] right-[20rpx] u-reset-button" open-type="share">
					<up-image :src="share" width="48rpx" height="48rpx"></up-image>
				</button>
			</view>
			<view class="mt-[20rpx]">
				<up-image :src="banner" width="100%" height="160rpx" radius="16rpx"></up-image>
			</view>
		</view>
		<view class="bg-white">
			<view class="">
				<up-parse :domain="BASE_URL" :content="goods.appGood?.text"></up-parse>
			</view>
			<view class="px-[28rpx] py-[32rpx]">
				<up-parse :domain="BASE_URL" :content="goods.appGood?.detailBrief"></up-parse>
			</view>
			<view class="px-[28rpx] py-[32rpx]">
				<up-parse :domain="BASE_URL" :content="goods.appMealText?.text"></up-parse>
			</view>
		</view>
		<view class="p-[20rpx]">
			<view class="bg-white rounded-[16rpx]">
				<view class="px-[20rpx] py-[24rpx] flex items-center justify-between border-b border-background">
					<view class="text-[30rpx]">评价({{ params.total }})</view>
					<view class="flex items-center leading-none" @click="toComment">
						<view class="text-[28rpx] gradation">查看全部</view>
						<up-icon name="arrow-right" color="#333" size="32rpx"></up-icon>
					</view>
				</view>
				<view class="">
					<view class="pl-[20rpx]">
						<view class="p-[20rpx] pl-0 border-b border-background" v-for="item in comment" :key="item.id">
							<view class="flex items-center">
								<up-avatar :src="$setBaseUrl(item.userAvatar)" size="80rpx"></up-avatar>
								<view class="ml-[16rpx]">
									<view class="text-gray text-[26rpx] mb-[10rpx]">{{ item.userNick }}</view>
									<up-rate v-model="item.score" count="5" size="36rpx" gutter="16rpx" :readonly="true"></up-rate>
								</view>
							</view>
							<view class="pl-[96rpx]">
								<view class="text-[26rpx] my-[16rpx]">{{ item.content }}</view>
								<up-album :urls="$setBaseUrl(item.pic)" multipleSize="176rpx" :rowCount="3" space="24rpx"></up-album>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="w-full h-[120rpx]"></view>
		<view class="w-full h-[120rpx] fixed bottom-0 left-0 bg-white flex items-center justify-between pr-[30rpx]">
			<view class="flex items-center justify-evenly text-[24rpx] flex-1">
				<button class="u-reset-button !m-0" open-type="contact">
					<up-icon name="kefu-ermai" size="48rpx"></up-icon>
					<view class="">客服</view>
				</button>
				<view class="" @click="collectGoodsFn">
					<up-icon name="heart" size="48rpx" v-if="!goods.goodCollectionVo?.isColl"></up-icon>
					<up-icon name="heart-fill" size="48rpx" color="#FF4D58" v-else></up-icon>
					<view class="">收藏</view>
				</view>
			</view>
			<view class="buy" @click="skuShow = true">立即购买</view>
		</view>
		<wu-sku
			v-model="skuShow"
			:data="skus"
			:themeColor="[255, 77, 88]"
			:defaultCover="$setBaseUrl(goods.appGood?.pic)"
			btnConfirmText="立即购买"
			notSelectSku="请选择完整的商品信息"
			@skuChange="skuChange"
			@confirm="skuConfirm"
		></wu-sku>
	</view>
</template>

<script setup>
import banner from '@/static/banner.png';
import share from '@/static/share.png';
import utils from '@/utils/utils';
import { getGoodsDetailByMenu, collectGoods, getGoodsComment } from '@/config/api/goods';
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { BASE_URL } from '@/utils/http';
onLoad((options) => {
	if (options.id) {
		getDetailByMenu(options.id);
		getComment(options.id);
	} else {
		utils.showToast('id为空');
	}
});
const { goods, getDetailByMenu, collectGoodsFn, getComment, comment, params } = useDeatilByMenu();
const { skuShow, skus, skuChange, skuConfirm } = useSku();
function useDeatilByMenu() {
	const goods = ref({});
	const comment = ref([]);
	const params = reactive({
		pageNum: 1,
		pageSize: 5,
		total: 0
	});
	const getDetailByMenu = async (id) => {
		// 调用接口获取数据
		try {
			const res = await getGoodsDetailByMenu({
				id
			});
			goods.value = res.data;
			skus.value = res.data.appGood.productItemList.map((item) => {
				return {
					id: item.id,
					price: item.price,
					stock: item.stock,
					sku_attrs: JSON.parse(item.productJson)
				};
			});
			console.log(skus.value);
		} catch (e) {
			//TODO handle the exception
		}
	};
	const collectGoodsFn = async () => {
		try {
			const res = await collectGoods(goods.value.appGood.id);
			if (res.code == 200) {
				goods.value.goodCollectionVo.isColl = !goods.value.goodCollectionVo.isColl;
			}
		} catch (e) {
			//TODO handle the exception
		}
	};
	const getComment = async (id) => {
		// 调用接口获取数据
		try {
			const res = await getGoodsComment(id, params);
			if (res.code == 200) {
				comment.value = comment.value.concat(res.rows);
				params.total = res.total;
			}
		} catch (error) {
			//TODO handle the exception
		}
	};
	return {
		goods,
		getDetailByMenu,
		collectGoodsFn,
		getComment,
		comment,
		params
	};
}
function useSku() {
	const skuShow = ref(false);
	const skus = ref([]);
	const skuChange = () => {
		console.log('skuChange');
	};
	const skuConfirm = (e) => {
		skuShow.value = false;
		uni.navigateTo({
			url: `/pages/checkout/checkout?productItemId=${e.sku.id}&num=${e.num}&type=${2}`
		});
	};
	return {
		skuShow,
		skus,
		skuChange,
		skuConfirm
	};
}
const toComment = () => {
	uni.navigateTo({
		url: `/pages/comment/comment?id=${goods.value.appGood.id}`
	});
};
</script>

<style scoped lang="scss">
.gradation {
	background: linear-gradient(90deg, #ff0060 0%, #ff223e 32%, #fe4e1d 72%, #ff6400 100%);
	-webkit-background-clip: text;
	color: transparent;
}
.buy {
	@apply bg-[#FF4D58] rounded-full font-bold text-white text-[26rpx] w-[432rpx] h-[80rpx] leading-[80rpx] text-center;
}
</style>
